<!DOCTYPE html>
<html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />
<title>这是双胞胎圆的svg</title>
<style>
	* {
  margin: 10px;
  padding: 10px;
}

</style>
</head>
<body> 
	
<h1>大家好，这是我的Git，你们可与我在上面交流</h1>
<ol>
<li>
     <a href="https://gitee.com/hiuying" >gitee</a>
</li>

<li>
     <a href="https://github.com/DingXiaoYing181013129" >github</a>
</li>
 </ol>



<h2>这是双胞胎圆</h2>
<h3>黑圆从粉圆中衍生出来，又回到粉圆里去</h3>
 
	
 <svg width="1000" height="1000" version="1.1" xmlns="http://www.w3.org/2000/svg">
 	 
<animateMotion
    xlink:href="#xmlns"
    path="M10 70 C 40 10, 65 10, 95 10 S 150 150, 180 80 S 60 40,250 90 S 70 300,100 180 Z"
    dur="10s"
    begin="0s"
    repeatCount="indefinite"
    keyTimes="0;1"
    calcMode="spline"
    keySplines="1 0.1 0.55 1"/>
</animateMotion> 

 	<circle id="xmlns"
   	cx="300" cy="200" r="200"
   	stroke="none"
   	stroke-width="7"
   	fill="pink" />
  
  
   <svg width="400" height="400" >
 
   <radialGradient
                  id="gr-radial"
                  cx="50%" cy="50%"
                  r="70%">
   
   <animate attributeName="r"
             values="0%;150%;100%;0%"
             dur="10s"
             repeatCount="indefinite" />
        
            
  
    <stop stop-color="#pink" offset="0">
      <animate attributeName="stop-color"
               values=\"#333;#FFF;#FFF;#333"
               dur="4s"
               repeatCount="indefinite" />
    </stop>
    <stop stop-color="rgba(55,55,55,0)" offset="100%" />
  </radialGradient>
  <circle cx="50%" cy="50%"
          r="50%"
          fill="url(#gr-radial)"/>
   	


</body>
</html>
